<!-- 轮播管理 -->
<template>
  <div>
    <titleWrap :queryFormConfig="queryFormConfig" :queryFormData="queryFormData" :add="add" :labelWidth="labelWidth">
      <div slot="btn">
        <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
        <el-button size="mini" @click="reset">清空筛选</el-button>
      </div>
      <div slot="add" class="add">
        <el-button size="mini" @click="handleClick(1)" type="primary">新增</el-button>
      </div>

      <myTable :tableConfig="tableConfig" :pagination="pagination" @paginationQuery="paginationQuery">
        <!-- 轮播图 -->
        <template #image="{ row }">
          <img :src="row.image" alt style="width:60px;height:60px;border-radius:3px;" />
        </template>

        <!-- 是否启用 -->
        <template #status="{ row }">
          <el-switch v-model="row.status" @change="updateBanner(row)" :active-value="activeStatus"
            :inactive-value="inactiveStatus"></el-switch>
        </template>

        <!-- 操作 -->
        <template #operation="{ row }">
          <div>
            <span class="operate" @click="handleClick(3, row.id)">详情</span>
            <span class="operate" @click="handleClick(2, row.id)">编辑</span>
            <span class="operate" @click="del(row.id)" style="color: #ff4040;">删除</span>
          </div>
        </template>
      </myTable>
    </titleWrap>
  </div>
</template>

<script>
import { queryPaged, deleteBanner, updateBanner } from "@/api/carouselManagement";
export default {
  components: {},
  data() {
    return {
      labelWidth: "65px",
      add: true,
      activeStatus: 1,
      inactiveStatus: 0,
      queryFormConfig: [
        {
          label: "轮播名称",
          prop: "name",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "是否启用",
          prop: "status",
          type: "select",
          options: [
            { description: "全部", dataCode: "" },
            { description: "已启用", dataCode: 1 },
            { description: "未启用", dataCode: 0 }
          ],
          change: this.handleQuery
        },
        { label: "", slotName: "btn" }
      ],
      queryFormData: {
        status: ""
      },
      tableConfig: {
        showIndex: true,
        loading: false,
        selection: false,
        data: [],
        columns: [
          { label: "轮播名称", prop: "name" },
          { label: "轮播图", slot: "image" },
          { label: "是否启用", slot: "status" },
          { label: "上传时间", prop: "createTime" },
          { label: "操作", slot: "operation" }
        ]
      },
      pagination: {
        page: 1,
        limit: 20,
        total: 0
      }
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // 查询
    handleQuery(num = 1) {
      if (num != 0) {
        this.pagination = {
          page: 1,
          limit: 20,
          total: 0
        };
      }
      this.tableConfig.loading = true;

      queryPaged({
        ...this.queryFormData,
        pageIndex: this.pagination.page,
        pageSize: this.pagination.limit,
        sortBy: 1
      })
        .then(res => {
          const { data, flag } = res;
          this.tableConfig.loading = false;
          this.tableConfig.data = data;
          this.pagination.total = flag;
        })
        .catch(res => {
          this.tableConfig.loading = false;
        });
    },
    paginationQuery(val) {
      this.pagination.page = val.page;
      this.handleQuery(0);
    },
    // 重置
    reset() {
      this.queryFormData = {
        status: ""
      };
      this.handleQuery();
    },
    // 是否启用
    updateMerchant(row) {
      updateMerchant({ id: row.id, status: row.status }).then(res => {
        this.toast("操作成功", "success");
        this.handleQuery();
      });
    },
    handleClick(num, id) {
      this.$router.push({
        path: "/carouselManagement/addCarousel",
        query: { num: num, id: id }
      });
    },
    // 删除
    del(id) {
      deleteBanner({ bannerId: id }).then((res) => {
        this.toast("操作成功", "success");
        this.handleQuery();
      })
    },
    // 启用
    updateBanner(row) {
      updateBanner({ id: row.id, status: row.status }).then((res) => {
        this.toast("操作成功", "success");
        this.handleQuery();
      })
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .queryForm {
  .add {
    margin-bottom: 20px;
  }
}
</style>